<template>
	<view class="content">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="tabs">
				<view v-if="current === 0" class="tab-content">
					<view class="flex-top-infos">
						<text class="content-text-1">逐句精听_预听原文</text>
						<text class="content-text-2">关注听不懂的地方</text>
						<text class="content-text-3">录音至少播放一次。中途不能暂停</text>
						<text class="content-text-3">集中注意力，整体把握文章</text>
					</view>
					<view class="explain">
						<text>{{explain}}</text>
					</view>
					<view class="play">
						<view class="play-item" v-for="item in audiofile">
							<text>{{item.name.split(".")[0]}}</text>
							<image src="../../static/v1.png" mode="widthFix" @click="audioPlay(item.url)"></image>
						</view>
					</view>
					<button type="primary" class="next" @click="current = 1">下一步</button>
				</view>
				<view v-if="current === 1" class="tab-content">
					<view class="flex-top-infos">
						<text class="content-text-1">逐句精听_分析语音</text>
						<text class="content-text-2">注意词尾t/d的省略;注意辅音+元音的连读;<br>注意虚词的变音</text>
						<text class="content-text-3">单击播放按钮播放句子</text>
						<text class="content-text-3">单句精听，看稿跟读模仿语音语调</text>
					</view>
					<view class="play-items">
						<view class="tag-view" v-for="(item,index) in sentences">
							<view class="top-flex">
								<uni-tag :mark="true" :text="`sentence${index+1}`" type="primary" size="default" />
								<image src="../../static/v2.png" mode="widthFix"  @click="audioPlay(item.file[0].url)"></image>
							</view>
							<view class="show" @click="switchSHow(item)">
								<text v-if="!item.show" >点击显示句子</text>
								<text v-else>{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	const pageDataCenter=uniCloud.importObject('page-data-center')
	const AUDIO = uni.createInnerAudioContext();
	export default {
		data() {
			return {
					items: ['预听全文', '分析语音'],
					colors: ['#007aff', '#4cd964', '#dd524d'],
					sentences:[
						{
							autio:'',
							sentence:''
						}
					],
					audiofile:[],
					explain:'',
					current: 0,
					colorIndex: 0,
					activeColor: '#007aff',
					styleType: 'text'
			}
		},
		onLoad(option) {
			this.getData(option.id)
			// #ifdef MP-WEIXIN
			//解决IOS播放没声音
			wx.setInnerAudioOption({
				obeyMuteSwitch: false
			});
			// #endif
		},
		methods: {
			getData(id){
				this.id=id
				pageDataCenter.getChapterSentences(id).then((res)=>{
					console.log(res)
					this.explain=res.data.explain
					this.audiofile=res.data.audiofile
					this.sentences=res.data.sentence.map((item)=>{
						return {
							...item,
							show:false
						}
					})
				})
			},
			  // 跳转
			  tn(e,type) {
				uni.navigateTo({
					url: e+'?id='+this.id+`&type=${type}`,
				});
			  },
			 onClickItem(e) {
			  if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
			  }
			},
			switchSHow(item){
				console.log('item',item)
				item.show=!item.show
				console.log('item',item)
			},
			audioPlay(src){
				if(!src){
					uni.showToast({
						icon:'none',
						title:'暂无内容'
					})
					return
				}
				AUDIO.src = src
				this.$nextTick(function () {
				  AUDIO.play();
				});
			},
			playVoice(word) {
			  AUDIO.src = 'https://dict.youdao.com/dictvoice?type=0&audio='+word
			  this.$nextTick(function () {
			    AUDIO.play();
			  });
			},
		},
		onUnload() {
			AUDIO.stop()
		},
		onBackPress() {
			AUDIO.stop()
		}
	}
</script>

<style>
	.content{
		color: #666;
	}
	.tabs{
		margin-top: 30px;
	}
	.content-text-1{
		font-size: 18px;
		color: #000;
		text-align: center;
	}
	.flex-top-infos{
		display: flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 10px;
		border-bottom: 1px solid #eee;
	}
	.flex-top-infos text{
		display: inline;
		width: 100%;
	}
	.content-text-2{
		font-size: 12px;
		margin: 10px 0;
		text-align: center;
		color: #666;
	}
	.content-text-3{
		font-size: 12px;
		text-align: center;
		color: #000;
	}
	.play{
		display: flex;
		flex-direction: column;
		align-items:center;
		width: 94%;
		margin: 8px auto;
		justify-content: center;
	}
	.explain{
		padding: 12px;
		background-color: #eee;
		color: #666;
		font-size: 14px;
		width: 94%;
		margin: 8px auto;
		word-break: break-all;
		white-space: pre-wrap;
		text-align: justify;
	}
	.play-item{
		display: flex;
		padding: 12px;
		background-color: #b5ecee;
		color: #666;
		margin: 8px auto;
		width: 100%;
		box-sizing: border-box;
		border-radius: 8px;
		align-items:center;
		justify-content: space-between;
	}
	.play-item image{
		width: 34px;
	}
	.next{
		width: 94%;
		margin: 70px auto 20px;
		background-color: #24F083 !important;
	}
	.top-flex{
		display: flex;
		justify-content: flex-start;
		width: 100%;
		background-color: #fff;
		padding: 15px;
	}
	.tag-view{
		display: flex;
		flex-direction: column;
		align-items:center;
		justify-content: center;
		margin-bottom: 10px;
	}
	.tag-view image{
		width: 20px;
		margin-left: 10px;
	}
	.tag-view .show{
		width: 100%;
		background-color: #eee;
		padding: 10px;
		color: #333;
		text-align: center;
	}
</style>
